<!doctype html>
<html>
 <head>
  <meta charset="UTF-8"></meta>
  <title>用户登录</title>
  <link rel="stylesheet" href="/static/layui/css/layui.css"></link>

 </head>
<body style="height: 300px;">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>用户登录</legend>
</fieldset>
	<form class="layui-form" action="/user/login" method="post" style="text-align: center;">
		<div class="layui-form-item" style="margin-bottom: 5px;">
			<label class="layui-form-label">用&nbsp;&nbsp;户&nbsp;&nbsp;名</label>
			<div class="layui-input-inline">
				<input id="userName" type="text" name="userName" required=""
					lay-verify="userName" placeholder="请输入用户名" autocomplete="off"
					class="layui-input" style="width: 280px;" />
			</div>
		</div>
		
		<div class="layui-form-item" style="margin-bottom: 5px;">
			<label class="layui-form-label">密&nbsp;&nbsp;码</label>
			<div class="layui-input-inline">
				<input id="password" type="password" name="password" required=""
					lay-verify="pass" placeholder="请输入密码" autocomplete="off"
					class="layui-input" style="width: 280px;" />
			</div>
		</div>
		<div class="layui-form-item" style="margin-bottom: 5px;text-align: left;">
			<div class="layui-input-block">
				<input id="rememberMe" type="checkbox" name="rememberMe" lay-skin="primary" title="记住密码">
			</div>
		</div>
		 <div class="layui-form-item" style="text-align: center;margin-top: 15px;">
			<button class="layui-btn layui-btn-normal layui-btn-radius" lay-submit="" lay-filter="checkForm" style="width: 300px;">登录</button>
		</div>
		<a href="javascript:findPassword()">忘记密码</a>
</form>
	<script type="text/javascript" src="/static/fsLayui/plugins/jquery/jquery.min.js"></script>
	<script src="/static/js/jquery.cookie.js"></script>
    <!-- layui.js -->
    <script src="/static/layui/layui.js"></script>
	<script src="/static/layui/layui.all.js"></script>
    <script type="text/javascript">

		layui.form.verify({
		  //我们既支持上述函数式的方式，也支持下述数组的形式
		  //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
		  pass: [
		    /^[\S]{6,18}$/
		    ,'密码必须6到18位，且不能出现空格'
		  ],
            userName: [
                /^[\S]{5,15}$/
                ,'用户名必须5到15位，且不能出现空格'
            ]
		});      
	
		layui.use('form', function() {
			var form = layui.form;
	
			//监听提交
			form.on('submit(checkForm)', function(data) {
				//layer.msg(JSON.stringify(data.field));
                var rememberMe = data.field.rememberMe;
                var url = '/user/login';
			        var data = $('form').serializeArray();
			        $.ajax({
			            type: "POST",
			            url: url,
			            data: data,
			            success: function (res) {
			                if(res.success){
                                if(rememberMe == 'on'){  // 记住密码
                                    $.cookie('user', $("#userName").val().trim()+'-'+$("#password").val().trim(), { expires: 7 });  // 7天有效期
                                }else{  // 不记住密码
                                    $.cookie('user', null); //删除一个cookie
                                }
			                	layer.msg('登录成功！', {
			                		  icon: 1,
			                		  time: 1000 //2秒关闭（如果不配置，默认是3秒）
			                		}, function(){
			                		  //do something
					                	var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
					            		parent.location.reload();
					            		parent.layer.close(index); //再执行关闭 
			                		});  
			                }
			                else{
			                	layer.msg(res.errorInfo);
			                }
			            },
			            error: function(data) {
			            	layer.msg("网络错误！");
			            }
			        });

				return false;
			});
		});

    function findPassword() {
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index); //再执行关闭
        parent.layer.open({
            type : 2,
            title : false,
            area : [ '450px', '350px' ], //宽高
            closeBtn : 1, //不显示关闭按钮
            scrollbar: false, //禁止浏览器出现滚动条
            resize: false, //禁止拉伸
            move : false, //禁止拖拽
            shade : 0.8, //遮罩
            content : '/user/findPassword.html', //这里content是一个Url
        });
    }

        $(function(){
            //从cookie中获取记住的用户名密码
            var user=$.cookie('user');
            if (typeof(user) != "undefined" && user != 'null'){
                var userNameAndPassword=user.split("-");
                $("#userName").val(userNameAndPassword[0]);
                $("#password").val(userNameAndPassword[1]);
                $("#rememberMe").attr({"checked":"checked"});
                $("#rememberMe").next().addClass("layui-form-checked");
            }
        });

	</script>
	
</body>
</html>